<template>
  <h1>添加管理员</h1>
  <hr />
  <el-radio-group v-model="labelPosition" label="label position">
    <el-radio-button label="left">Left</el-radio-button>
    <el-radio-button label="right">Right</el-radio-button>
    <el-radio-button label="top">Top</el-radio-button>
  </el-radio-group>
  <div style="margin: 20px" />
  <el-form
    :label-position="labelPosition"
    label-width="100px"
    :model="AddAdmin"
    style="max-width: 460px"
    :rules="rules"
  >
    <el-form-item label="管理员姓名" prop="adminname" required>
      <el-input v-model="AddAdmin.adminname" clearable placeholder="请输入至少两位的账号名" />
    </el-form-item>
    <el-form-item label="密码" prop="password" required>
      <el-input v-model="AddAdmin.password" :show-password="true" clearable   placeholder="请输入3-8位字母或数字或下划线的字符" />
    </el-form-item>
    <el-form-item label="角色" prop="role" required>
      <el-radio-group v-model="AddAdmin.role">
        <el-radio :label="1">超级管理员</el-radio>
        <el-radio :label="2">普通管理员</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 权限选择 -->
    <el-tree
      ref="treeRef"
      :data="data"
      show-checkbox
      :default-checked-keys="[1]"
      node-key="id"
      highlight-current
      accordion
    />

    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage,ElTree } from "element-plus";
import "element-plus/dist/index.css";

// 引入权限选择的数据(菜单)
import { menudata as data } from "../../../grants/menudata";

// 在setup函数里（setup语法糖里），如果想使用路由对象。
import { useRouter } from "vue-router";
import { TreeKey } from "element-plus/es/components/tree/src/tree.type";
const $router = useRouter();

const labelPosition = ref("top");
interface IAdmin {
  adminname: string;
  password: string;
  role: number;
  checkedKeys: TreeKey[];
}

const AddAdmin = reactive<IAdmin>({
  adminname: "",
  password: "",
  role: 2,
  checkedKeys: [],
});

// 正则
const validateAdminname = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else if (/^.{2,10}$/.test(value) == false) {
    callback(new Error("请输入符合至少两位的账号名"));
  } else {
    callback();
  }
};
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (/^\w{3,8}$/.test(value) == false) {
    callback(new Error("请输入3-8位字母或数字或下划线的字符"));
  } else {
    callback();
  }
};

const rules = ref({
  password: [{ validator: validatePassword, trigger: "change" }],
  adminname: [{ validator: validateAdminname, trigger: "change" }],
});

let  treeRef = ref<InstanceType<typeof ElTree>>();

const onSubmit = () => {
  // 定义一个空数组接收，返回的对应的id
  // getCheckedKeys-若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组
  let arr:TreeKey[] = treeRef.value!.getCheckedKeys(false);

  let halfArr:TreeKey[] = treeRef.value!.getHalfCheckedKeys();

  arr = arr.concat(halfArr);
  // 打印查看下获得的数组
  console.log("arr", arr);

  AddAdmin.checkedKeys = arr;

  // 当全部选中后默认添加的位超级管理员
  // let checkedKeys = [
  //   "1",
  //   "1-1",
  //   "2",
  //   "2-1",
  //   "2-2",
  //   "3",
  //   "3-1",
  //   "3-2",
  //   "4",
  //   "4-1",
  //   "4-2",
  //   "5",
  //   "5-1",
  //   "6",
  //   "6-1",
  //   "7",
  //   "6-1",
  //   "8",
  //   "8-1",
  //   "8-2",
  // ];
  // // 权限判定
  // if (AddAdmin.checkedKeys !== checkedKeys) {
  //   AddAdmin.role = 1;
  // } else {
  //   AddAdmin.role = 2;
  // }

  if (AddAdmin.adminname === "" || AddAdmin.password === "") {
    ElMessage({
      message: "请检查用户名、密码是否输入！",
    });
  } else {
    service({
      url: "/admin/admin/add",
      method: "post",
      data: AddAdmin,
    }).then((res) => {
      if (res.data.code === "200") {
        ElMessage({
          message: `添加管理员成功！`,
          type: "success",
        });
        $router.push("/HomeIndex/AdminList");
      } else if (res.data.code === "10004") {
        ElMessage({
          message: "该管理员已存在！",
          type: "warning",
        });
      }
    });
  }
};
</script>

<style scoped>
</style>